<template>
  <div class="group-table-box">

    <div class="add-label">
      <Button type="info" @click="onClickAddLabel">新增Banner</Button>
    </div>

    <div class="table-container">
      <Table
        border
        class="table-container-table"
        :columns="columns7"
        :data="tableData"
        :loading="isLoading"
      ></Table>
      <Page
        :total="totalPageCount"
        :page-size="10"
        :current="form.pageIndex"
        show-elevator
        class="table-container-page"
        @on-change="getTableData"
      />
    </div>

    <!-- 点击添加 -->
    <Modal
      v-model="showAddModal"
      width="50"
      footer-hide
    >
      <div class="modal-container">
        <Row class="modal-content" :gutter="16">
          <Col span="6">
            <p class="modal-label">Banner名称</p>
          </Col>
          <Col span="18">
            <Input v-model="addName" placeholder="广告位名称" class="modal-input" />
          </Col>
        </Row>
        <Row class="modal-content" :gutter="16">
          <Col span="6">
            <p class="modal-label">Banner图片</p>
            <p class="modal-label-detail">(建议尺寸 111*222)</p>
          </Col>
          <Col span="18">
            <Upload
              type="drag"
              action="/"
            >
              <div style="padding: 70px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>点击上传图片</p>
              </div>
            </Upload>
          </Col>
        </Row>
        <div slot="footer" class="modal-footer">
          <Button type="primary" @click="onClickAddConfirm">完成</Button>
        </div>
      </div>
    </Modal>

    <!-- 点击编辑 -->
    <Modal
      v-model="showEditModal"
      width="50"
      footer-hide
    >
      <div class="modal-container">
        <Row class="modal-content" :gutter="16">
          <Col span="6">
            <p class="modal-label">Banner名称</p>
          </Col>
          <Col span="18">
            <Input v-model="addName" placeholder="广告位名称" class="modal-input" />
          </Col>
        </Row>
        <Row class="modal-content" :gutter="16">
          <Col span="6">
            <p class="modal-label">Banner图片</p>
            <p class="modal-label-detail">(建议尺寸 111*222)</p>
          </Col>
          <Col span="18">
            <Upload
              type="drag"
              action="/"
            >
              <div style="padding: 70px 0">
                <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                <p>点击上传图片</p>
              </div>
            </Upload>
          </Col>
        </Row>
        <div slot="footer" class="modal-footer">
          <Button type="primary" @click="onChangeEditUpload">完成</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isLoading: false,
      totalPageCount: 10,
      showAddModal: false,
      showEditModal: false,
      uploadAddImgUrl: '',
      showAddUploadImg: false,
      uploadEditImgUrl: '',
      showEditUploadImg: false,
      addName: '',
      editName: '',
      adId: '',
      advertisingNo: '',
      form: {
        name: '',
        pageIndex: 1,
        pageSize: 10
      },
      columns7: [
        {
          title: '优先级',
          type: 'index',
          align: 'center'
        },
        {
          title: 'Banner名称',
          key: 'name',
          align: 'center'
        },
        {
          title: 'Banner图片（缩略图）',
          key: 'img',
          width: 400,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('img', {
                attrs: {
                  src: this.tableData[params.index].imagePath
                },
                style: {
                  width: '250px',
                  height: '90px',
                  marginTop: '10px',
                  marginBottom: '10px'
                }
              }, )
            ])
          }
        },
        {
          title: '上传时间',
          key: 'time',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px',
                  marginTop: '10px'
                },
                on: {
                  click: () => {
                    this.check(params.index)
                  }
                }
              }, '编辑'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px',
                  marginTop: '10px'
                },
                on: {
                  click: () => {
                    this.remove(params.index)
                  }
                }
              }, '删除'),
              h('i-switch', { //数据库1是已处理，0是未处理
                props: {
                  type: 'primary',
                  //控制开关的打开或关闭状态，官网文档属性是value
                  value: this.tableData[params.index].isDelete == '1' ? false : true,
                  size: 'large'
                },
                scopedSlots: {
                  close: function (props) {
                    return '禁用'
                  },
                  open: function (props) {
                    return '启用'
                  }
                },
                style: {
                  marginRight: '5px',
                  marginTop: '10px'
                },
                on: {
                  'on-change': (value) => {//触发事件是on-change,用双引号括起来，
                                           //参数value是回调值，并没有使用到
                    this.switch(params.index, value) //params.index是拿到table的行序列，可以取到对应的表格值
                  }
                }
              },),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small',
                },
                style: {
                  marginRight: '5px',
                  marginTop: '10px',
                  marginBottom: '10px'
                },
                on: {
                  click: () => {
                    this.upMove(params.index)
                  }
                }
              }, '上移'),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small',
                },
                style: {
                  marginRight: '5px',
                  marginTop: '10px',
                  marginBottom: '10px'
                },
                on: {
                  click: () => {
                    this.downMove(params.index)
                  }
                }
              }, '下移')
            ]);
          }
        }
      ],
      tableData: [{
        name: '123213',
        img: '123213',
        time: 'adsfasfd'
      }]
    }
  },
  mounted() {
    // this.getTableData()
  },
  watch: {
  },
  methods: {
    onClickAddLabel() {
      this.showAddModal = true
    },
    onClickAddConfirm() {

    },
    onClickEditConfirm() {

    },
    check(index) {
      this.showEditModal = true
    },
    remove(index) {
      this.adId = this.tableData[index].id;
      this.$Modal.confirm({
        title: '确定删除？',
        // content: '<p>确定删除？</p>',
        onOk: () => {

        },
        onCancel: () => {
          // this.$Message.info('Clicked cancel');
        }
      });
    },
    switch(index, value) {

    },
    upMove(index) {
      // 上移
    },
    downMove(index) {
      // 下移
    },
    onChangeEditUpload(event) {

    },
    onChangeAddUpload(event) {

    },
    getTableData(index) {

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.group-table-box {
  height: calc(100vh - 66px);
  overflow-x: hidden;
  padding: 20px;
}
.table-container-page {
  color: #000;
  text-align: center;
  margin-top: 20px;
}
.add-label {
  display: block;
  text-align: right;
  margin: 0 0 20px 0;
}
.modal-container {
  padding: 30px 30px 20px 30px;
}
.modal-content {
  margin-top: 15px;
}
.modal-label {
  font-size: 16px;
  line-height: 32px;
  text-align: center;
}
.modal-label-detail {
  text-align: center;
}
.modal-input {
  width: 100%;
}
.modal-footer {
  text-align: center;
  margin-top: 15px;
}
.modal-footer button {
  width: 100px;
}
</style>
